<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
        }
        .btn{
            width: 500px;

            height: 100px;
            display: flex;
        }
        .btn li{
            width: 50px;
            height: 50px;
           
        }
        #btn1{
             border: 20px solid red;
             background-color: red;

        }
        #btn2{
             border: 20px solid yellowgreen;
             background-color: yellowgreen;
        }
        #btn3{
             border: 20px solid hotpink;
             background-color: hotpink;
        }
        /* git commit -m "first commit"
git remote add origin git@gitee.com:alongtao2/anhongji.git
git push -u origin "master" */
        .nav{
           width: 500px;
           height: 30px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           /* text-align: center; */
           background-color: rgb(24, 171, 71);
        }
        .nav span{
          width: 100px;
          height: 28px;
        
            text-align: center;
            border: 1px solid #000;
        }
        .nav span:hover{
            text-decoration:underline
        }
    </style>
    <script>
        window.onload=function(){
            var bodys = document.getElementById('bodys')
        }
      
        function que(i){
            console.log(i);
            bodys.style.backgroundColor=i
        }

    </script>
</head>
<body id="bodys">
    <ul class="btn">
        <li onclick="que('red')" id="btn1" ></li>
        <li onclick="que('yellowgreen')" id="btn2" ></li>
        <li onclick="que('hotpink', )" id="btn3" ></li>
    
    </ul>
    <div class="nav">
        <span c>电影</span>
        <span>美术</span>
        <span>艺术</span>
        <span>写真</span>
        <span>影楼</span>
    </div>
</body>
</html>